<template>
  <div>
    <!-- 弹窗 -->
    <a-modal :title="title" v-model="visible" @ok="handleOk" @cancel="cancelModal" okText="确认"
             cancelText="取消" width="50%">
      <a-form :form="custForm">
        <a-form-item v-bind="formItemLayout" label="客户名称">
          <a-input v-decorator="[
          'custName',
          { rules: [{ required: true }] },
        ]" placeholder="请输入客户名称">
          </a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="客户类型">
          <a-select v-decorator="[
          'custType',
          { rules: [{ required: true }] },
        ]" placeholder="请选择客户类型" allowClear>
            <a-select-option value="1000">普通客户</a-select-option>
            <a-select-option value="1100">政企客户</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="客户编码">
          <a-input v-decorator="[
          'custNumber',
          { rules: [{ required: true }] },
        ]" placeholder="客户编码">
          </a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="客户地址">
          <a-input v-decorator="[
          'custAddr',
          { rules: [{ required: true }] },
        ]" placeholder="客户地址">
          </a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="入网时间">
          <a-date-picker show-time
                         v-decorator="[
          'enterDate',
          { rules: [{ required: true }] },
        ]" placeholder="入网时间">
          </a-date-picker>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="备注">
          <a-textarea v-decorator="[
          'remark',
          { rules: [{ required: true }] },
        ]" placeholder="备注">
          </a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import custApi from '@/api/cust'
  export default {
    props: {
      visibleModal: {
        type: Boolean,
        default: false
      },
      selectedRows: {
        type: Array,
        default: null
      }
    },
    watch: {
      visibleModal(val) {
        this.visible = val
      },
      selectedRows(val) {
        if (this.visible && val && val.length > 0) {
          this.setSelectedRows()
          this.title = '修改'
        } else {
          this.title = '新增'
        }
      }
    },
    data() {
      return {
        formItemLayout: {
          labelCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 6
            }
          },
          wrapperCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 16
            }
          }
        },
        title: null,
        visible: false,
      }
    },
    mounted() {
    },
    beforeCreate() {
      this.custForm = this.$form.createForm(this, {
        name: 'custForm'
      })
    },
    methods: {
      setSelectedRows() {
        this.$nextTick(() => {
          this.custForm.setFieldsValue({
            custName: this.selectedRows[0].custName,
            custType: this.selectedRows[0].custType,
            custAddr: this.selectedRows[0].custAddr,
            custNumber: this.selectedRows[0].custNumber,
            enterDate: this.selectedRows[0].enterDate,
            remark: this.selectedRows[0].remark,
          })
        })
      },
      handleOk(e) {
        if (this.selectedRows && this.selectedRows.length > 0) {
          this.handleSubmit(e, 'mod', this.custForm)
        } else {
          this.handleSubmit(e, 'add', this.custForm)
        }
      },
      cancelModal() {
        this.custForm.resetFields()
        this.$emit('visibleChange', '1')
      },
      // 表单提交
      handleSubmit(e, val, form) {
        e.preventDefault()
        form.validateFields((err, values) => {
          if (err) {
            return
          }
          switch (val) {
            case 'add':
              this.addCust(form, values)
              break
            case 'mod':
              this.updateCust(form, values)
              break
            default:
              break
          }
        })
      },
      addCust(form, val) {
        let self = this
        let params = val
        params.enterDate = this.$moment(val.enterDate).format('YYYY-MM-DD HH:mm:ss')
        custApi.addCust(params, data => {
          if (data) {
            self.$success({
              title: '提示',
              content: '添加成功'
            })
            self.$emit('refresh')
            self.$emit('visibleChange', '1')
            form.resetFields()
          } else {
            self.$error({
              title: '提示',
              content: '添加失败!'
            })
          }
        })
      },
      updateCust(form, val) {
        let self = this
        let params = this.selectedRows[0];
        params.custName = val.custName
        params.custType = val.custType
        params.custAddr = val.custAddr
        params.custNumber = val.custNumber
        params.enterDate = this.$moment(val.enterDate).format('YYYY-MM-DD HH:mm:ss')
        params.remark = val.remark
        custApi.updateCust(params, data => {
          if (data) {
            self.$success({
              title: '提示',
              content: '修改成功'
            })
            self.$emit('refresh')
            self.$emit('visibleChange', '1')
            form.resetFields()
          } else {
            self.$error({
              title: '提示',
              content: '修改失败!'
            })
          }
        })
      }
    }
  }

</script>

<style></style>
